import React, { PureComponent } from 'react'
import ResponsiveImage from '@/components/ResponsiveImage'
import PropTypes from 'prop-types'
import { formatNumber } from '@/utils'
import css from './photos.module.scss'
export default class SpacePhotos extends PureComponent {
    static propTypes = {
        list: PropTypes.array
    }
    static defaultProps = {
        list: []
    }

    render() {
        const { list } = this.props
        return (
            <div>
                {
                    list.map(item => {
                        return (
                            <div key={item.doc_id} className={css["wrap"]}>
                                <div className={css['cover']}>
                                    <ResponsiveImage  
                                        className={css["cover-img"]}                           
                                        src={item.pictures[0].img_src}
                                        size="@352w_352h_1c"
                                    >
                                        { item.count > 1 && <span className="pics">{item.count}p</span>}
                                    </ResponsiveImage>
                                </div>
                                <div className={css['content']}>
                                    <span className={css["title"]}>{ item.description }</span>
                                    <div className={css["count"]}>
                                        <span><i className="fa fa-view"></i>{ formatNumber(item.view) }</span>
                                        <span><i className="fa fa-comment"></i>{ formatNumber(item.comment) }</span>
                                    </div>
                                </div>
                          </div>
                        )
                    })
                }
            </div>
        )
    }
}